FlyTalk.views.ItinView = Ext.extend(Ext.Panel, {
	//fullscreen: true,
	scroll: false,
	title: 'Itinerary',
	//scroll: true,
	
    initComponent: function () {
		this.backButton = new Ext.Button({
			
			iconCls: 'home',
			iconMask: true,
			handler: this.backButtonTap,
			scope: this
		});
		
		this.toolbar = new Ext.Toolbar({
				title: 'ItinMapView',
				doc: 'top',
				layout: 'hbox',
				hidden: 'true',
				items: [
					this.backButton,
					{xtype: 'spacer'},
					//this.composeButton,
				]
		});
		
		this.dockedItems = [this.toolbar];
	
		Ext.regModel('TouchpointModel', {
		    fields: [ 
			{
		         name: 'detail1',
		         type: 'string'
		    }, {
		         name: 'detail2',
		         type: 'string'
		    }, {
		         name: 'detail3',
		         type: 'string'
		   }, {
				name: 'tp',
				type: 'string'
		   }, {
				name: 'imgLoc',
				type: 'string'
		   }, {
				name: 'airport',
				type: 'string'
			},{
				name: 'step',
				type: 'string'
			}
		   ]
		});
		
		this.tpStore = new Ext.data.Store({
			model : 'TouchpointModel',
			autoLoad: true,

			proxy: {
          		type: 'localstorage',
        		id: 'tp-store'
    		},
			//sorters: ['step'],

			getGroupString : function(record) {
				 //eturn record.get('category')[0];
				 return "<span >"+record.get('airport').toString() +"</span>";
			},
			
			
			data: [
				{airport:'Funchal Intl Airport (FNC)', detail1: 'Passport Check', detail2: 'Walk: 1 min, Wait: 0 min', detail3: '', imgLoc: 'icopassportcontrol.png', step: 1, tp: 'customs'},
				{airport:'Funchal Intl Airport (FNC)', detail1: 'Security', detail2: 'Walk: 1 min, Wait: 20 min', detail3: '', imgLoc: 'icosecurity.png', step: 2, tp: 'Security'},
				{airport:'Funchal Intl Airport (FNC)', detail1: 'Boarding Gate', detail2: 'Gate number 12', detail3: 'Walking time: 2 mins', imgLoc: 'icoboarding.png', step: 3, tp: 'boarding'},
				{airport:'Funchal Intl Airport (FNC)', detail1: 'Flying', detail2: 'Depart: 0800', detail3: 'Flight time: 1h20m', imgLoc: 'icoflight.png', step: 4, tp: 'flying'},
				{airport:'Lisbon Portela Airport (LIS)', detail1: 'Arrive', detail2: 'Arrive: 0950', detail3: '', imgLoc: 'icodeplane.png', step: 5, tp: 'deplane'},
				{airport:'Lisbon Portela Airport (LIS)', detail1: 'Border Control', detail2: 'Walk: 7 min, Wait: 23 min', detail3: '', imgLoc: 'icopassportcontrol.png', step: 6, tp: 'customs'},
				{airport:'Lisbon Portela Airport (LIS)', detail1: 'Boarding Gate', detail2: 'Walk: 3 min', detail3: 'Boarding time: 1330', imgLoc: 'icoboarding.png', step: 7, tp: 'boarding'},
				{airport:'Lisbon Portela Airport (LIS)', detail1: 'Flying', detail2: 'Depart 1400', detail3: 'Flight Time: 5h00', imgLoc: 'icoflight.png', step: 8, tp: 'flying'},
				{airport:'Sheremetyevo Intl Airport (SVO)', detail1: 'Arrive', detail2: 'Arrive 1900', detail3: '', imgLoc: 'icodeplane.png', step: 9, tp: ''},
				{airport:'Sheremetyevo Intl Airport (SVO)', detail1: 'Immigration', detail2: 'Walk: 5 min, Wait: 13 min', detail3: '', imgLoc: 'icopassportcontrol.png', step: 10, tp: 'customs'},
				{airport:'Sheremetyevo Intl Airport (SVO)', detail1: 'Customs', detail2: 'Walk: 2 min, Wait: 2 min', detail3: '', imgLoc: 'icosecurity.png', step: 11, tp: 'Security'},
				{airport:'Sheremetyevo Intl Airport (SVO)', detail1: 'Ground Transportation', detail2: '', detail3: '', imgLoc: 'icodestination2.png', step: 12, tp: 'destination'},
				{detail1: '', detail2: '', detail3: '', tp: '', imgLoc:'icoblank.png'},
				{detail1: '', detail2: '', detail3: '', tp: '', imgLoc:'icoblank.png'},

			],
		});
			
		this.list = new Ext.List({
			itemTpl : '<div class="list-icon"> <img width=36px src="./images/{imgLoc}">' + 
					'</div> <div class="list-block"><h1 class="list-detail-large">{detail1}</h1> <p class="list-detail-small">{detail2}</p> <p class="list-detail-small">{detail3}</p></div>' + 
					'<div class="arrow"><img src="images/arrowInBubble.png" width="44" height="44"></div>',
			store: this.tpStore,
			scroll: true,
			//onItemDisclosure: true,	
			fullscreen: true,
			grouped: true,
			listeners:{
							
				disclose: function(dv, tweet, index, evt){
					//Ext.Msg.alert('disclose');
					FlyTalk.views.ItinView.onDisclose(FlyTalk.views.ItinView.tpStore.getAt(index).data.tp);
				},
				
				itemTap: function(dv, index, item, e){
					if(e.getTarget('.arrow')){
						//rec = serviceStore.getAt(index);
						//alert("click image hello" + rec.get('sd'));
						FlyTalk.views.ItinView.onDisclose(FlyTalk.views.ItinView.tpStore.getAt(index).data.tp);
					}
				},
			}					
		});
		
		this.items = [this.list];
		
		FlyTalk.views.ItinView.superclass.initComponent.call(this);
        
    },
	
	onDisclose: function (tp) {
		
		switch (tp){
			case 'Check-in':
				Ext.get('detailImage').update('<div><img id="tp" src="./images/checkin.png"></img></div>');
				break;
			case 'Security':
				Ext.get('detailImage').update('<div><img id="tp" src="./images/security.png"></img></div>');
				break;
			case 'customs':
				Ext.get('detailImage').update('<div><img id="tp" src="./images/customs.png"></img></div>');
				break;
			case 'boarding':
				Ext.get('detailImage').update('<div><img id="tp" src="./images/boarding.png"></img></div>');
				break;
			case 'deplane':
				Ext.get('detailImage').update('<div><img id="tp" src="./images/deplane.png"></img></div>');
				break;
			case 'destination':
				Ext.get('detailImage').update('<div><img id="tp" src="./images/dest.png"></img></div>');
				break;
			case 'baggage':
			default:
				Ext.get('detailImage').update('No Information to Show');
		}
		FlyTalk.views.ItinDetailView.toolbar.setTitle(tp);
	
		Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openItinDetail'
        });
	
    },
		
	backButtonTap: function () {
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openHome'
        });
    },

});